<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>几个注意点</title>
</head>
<script type="text/javascript" src="../js/vue.js"></script>
    <!--
        几个注意点：
            1.关于组件名：
                一个单词组成：
                    第一种写法（首字母小写）：school
                    第二种写法（首字母大写）：School
                多个单词组成：
                    第一种写法（kebab-case命名）：my-school
                    第二种写法（大驼峰命名）：MySchool（需要使用Vue脚手架支持）
                备注：
                    1.组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行；
                    2.定义组件时，可以使用name配置项指定组件在开发者工具中呈现的名字。

            2.关于组件标签：
                第一种写法：<school></school>
                第二种写法：<school/>（需要使用Vue脚手架，否则会导致后续组件不能渲染）
            
            3.一个简写方式：
                const school = Vue.extend({options}); 可简写为 const school = {options};
    -->
    <body>
        <div id="root">
            <h1>{{msg}}</h1>
            <hr/>
            <school></school>
        </div>
    </body>

        <script type="text/javascript">
            Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。
            
            //定义组件
            const school = Vue.extend({
                template:`
                <div>
                    <h2>学校名称：{{schoolName}}</h2>
                    <h2>学校地址：{{schoolAddress}}</h2>
                </div>
                `,
                data(){
                    return{
                        schoolName:'广西科技师范学院',
                        schoolAddress:'广西省来宾市铁北大道966号'
                    }
                }
            });

            new Vue({
                el:'#root',
                data:{
                    msg:'欢迎学习Vue!'
                },
                components:{
                    school:school
                }
            })

        </script>
    
</html>